<template>
  <div>
    <el-dialog
      title="分配权限"
      :visible="showPermDialog"
      @close="btnPermCancel"
    >
      <!-- 权限是一颗树 -->
      <!-- 将数据绑定到组件上 -->
      <!-- check-strictly 如果为true 那表示父子勾选时  不互相关联 如果为false就互相关联 -->
      <!-- id作为唯一标识 -->
      <!-- <el-tree
        ref="permTree"
        :data="permData"
        :props="defaultProps"
        :show-checkbox="true"
        :check-strictly="true"
        :default-expand-all="true"
        :default-checked-keys="selectCheck"
        node-key="id"
      /> -->
      <el-tree
        v-if="isShowTree"
        ref="perTree"
        :data="perData"
        :props="{label:'name'}"
        show-checkbox
        check-strictly
        node-key="id"
        :default-expanded-keys="selectKeys"
        :default-checked-keys="selectKeys"
      />
      <!-- 确定 取消 -->
      <el-row
        slot="footer"
        type="flex"
        justify="center"
      >
        <el-col :span="6">
          <el-button
            type="primary"
            size="small"
            @click="btnPermOK"
          >确定</el-button>
          <el-button
            size="small"
            @click="btnPermCancel"
          >取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionAll } from '@/api/permission'
import { transData } from '@/utils/index'
import { getRoleDetail, allotPermission } from '@/api/setting'
export default {
  props: {
    showPermDialog: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String
    }
  },

  data () {
    return {
      perData: [],
      selectKeys: [],
      isShowTree: false
    }
  },
  created () {
    this.getPermissionAll()
  },
  methods: {
    async getPermissionAll () {
      this.perData = transData(await getPermissionAll(), '0')
    },
    async getRoleDetail (id) {
      console.log(id)
      const { permIds } = await getRoleDetail(id)
      this.selectKeys = permIds
      if (this.selectKeys) {
        this.isShowTree = true
      }
      console.log(this.selectKeys)
    },
    // 确定触发函数
    async btnPermOK () {
      const permIds = this.$refs.perTree.getCheckedKeys()
      // console.log(this.userId)
      await allotPermission({ id: this.userId, permIds })
      this.$message.success('操作成功')
      this.$emit('update:show-perm-dialog', false)
    },
    // 关闭弹层方法
    btnPermCancel () {
      this.$emit('update:show-perm-dialog', false)
    }
  }
}
</script>
